<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore } from '@/stores'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const memberStore = useMemberStore()
const currentTab = ref(2)
const currentCategory = ref(0)
const tabs = ['直播', '关注', '逛逛', '视频']
const categories = ['全部', '美食', '穿搭', '家居', '彩妆', '潮玩']
const posts = [
  {
    image:
      'https://img2.baidu.com/it/u=3772106179,3666759690&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
    title: '辣妹就是要穿比基尼啊',
    author: '不晚妹妹',
    authorAvatar: 'https://q1.itc.cn/q_70/images03/20240414/d477378709494a9e8adf154fb5200feb.jpeg',
    likes: 1320,
  },
  {
    image:
      'https://img0.baidu.com/it/u=3931648111,3063344099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1068',
    title: '无语。。。内🐟真不是随便能进的！？',
    author: 'reze天猫官方',
    authorAvatar: 'https://q3.itc.cn/q_70/images03/20241013/d3a77cba5a074744905d0c49aa480487.jpeg',
    likes: 1707,
  },
  {
    image:
      'https://img2.baidu.com/it/u=3772106179,3666759690&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
    title: '辣妹就是要穿比基尼啊',
    author: '不晚妹妹',
    authorAvatar: 'https://q1.itc.cn/q_70/images03/20240414/d477378709494a9e8adf154fb5200feb.jpeg',
    likes: 1320,
  },
  {
    image:
      'https://img0.baidu.com/it/u=3931648111,3063344099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1068',
    title: '无语。。。内🐟真不是随便能进的！？',
    author: 'reze天猫官方',
    authorAvatar: 'https://q3.itc.cn/q_70/images03/20241013/d3a77cba5a074744905d0c49aa480487.jpeg',
    likes: 1707,
  },
]
const switchTab = (index: number) => {
  currentTab.value = index
}
const switchCategory = (index: number) => {
  currentCategory.value = index
}
</script>
<template>
  <view class="container">
    <view class="top" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <view class="avatar">
        <image :src="memberStore.profile?.avatar" mode="aspectFill"></image>
      </view>
      <!-- 导航标签 -->
      <view class="nav-tabs" :scroll-x="true">
        <view
          class="tab-item"
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: currentTab === index }"
          @tap="switchTab(index)"
        >
          {{ tab }}
        </view>
      </view>
    </view>
    <!-- 顶部搜索栏 -->

    <view class="search-box">
      <text class="iconfont icon-search"></text>
      <view class="input">
        <input type="text" placeholder="黑色卫衣" />
        <button class="search-btn">搜索</button>
      </view>
    </view>

    <!-- 分类标签 -->
    <scroll-view enable-flex class="category-tabs" :scroll-x="true">
      <view
        class="category-item"
        v-for="(category, index) in categories"
        :key="index"
        :class="{ active: currentCategory === index }"
        @tap="switchCategory(index)"
      >
        {{ category }}
      </view>
    </scroll-view>

    <!-- 内容区域 -->
    <view class="content">
      <navigator
        hover-class="none"
        class="post-item"
        v-for="(post, index) in posts"
        :key="index"
        :url="`/pages/guangguang_detail/guangguang_detail`"
      >
        <image :src="post.image" mode="aspectFill"></image>
        <view class="post-info">
          <text class="post-title">{{ post.title }}</text>
          <view class="post-meta">
            <view class="author">
              <image :src="post.authorAvatar" mode="aspectFill"></image>
              <text>{{ post.author }}</text>
            </view>
            <view class="likes">
              <text class="iconfont icon-heart"></text>
              <text>{{ post.likes }}</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
.container {
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: #fff;
  .avatar image {
    height: 40rpx;
    width: 40rpx;
  }
}

.nav-tabs {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  background: #fff;
  position: relative;
}

.tab-item {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
  .active {
    color: #333;
    font-weight: bold;
  }
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: #ff6b00;
  border-radius: 2rpx;
}

.search-box {
  flex: 1;
  display: flex;
  margin: 0 20rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  height: 60rpx;
  .input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    font-size: 28rpx;
  }
}
input {
  flex: 1;
  padding-left: 60rpx;
}

.search-btn {
  background: #ff6b00;
  align-items: center;
  color: #fff;
  font-size: 28rpx;
  padding: 0rpx 30rpx;

  border-radius: 50rpx;
}

.category-tabs {
  display: flex;
  white-space: nowrap;
  padding: 20rpx;
  background: #fff;
}

.category-item {
  display: inline-flex;
  padding: 0 30rpx;
  font-size: 28rpx;
  height: 40rpx;
  position: relative;
  color: #666;
}

.category-item.active {
  color: #333;
  font-weight: bold;
}
.category-item.active::after {
  content: '';
  position: absolute;
  bottom: -1rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: #ff6b00;
  border-radius: 2rpx;
}

.content {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
}

.post-item {
  width: 345rpx;
  padding: 10rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  // width: 50%;
  // padding: 10rpx;
  // box-sizing: border-box;
}

.post-item image {
  width: 100%;
  height: 600rpx;
  border-radius: 10rpx;
}

.post-info {
  padding: 10rpx;
}

.post-title {
  font-size: 28rpx;
  line-height: 1.4;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.author {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.author image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.likes {
  color: #999;
  font-size: 24rpx;
}
</style>
